<style type="text/css">
.customCombo>.body>.tr { float: left; width: auto; }
.customCombo>.body>.tr { height: 61px; }
.customCombo>.body>.tr>.td { height: 60px; line-height: 60px; }
.customCombo>.body>.tr>.td img { margin: 1px; }
.customCombo>.body>.tr:hover .td { background-color: green; }
.customCombo>.body>.tr.selected .td { background-color: blue; }
</style>
<script type="text/javascript">
$(function(){
	var dd = [];
	for(var i=1;i<=20; i++)
		dd.push({ code: i + '', name: 'Employee ' + i });
	var cfg = {
		keyField: 'code',
		displayField: 'name',
		multiSelect: false,
		boxWidth: 310,
		width: 200,
		cols : [{
			field: 'code', width: 60, render: function(r, a){
				return '<img src="/mac/js/combo/images/' + r.code + '.jpg" title="' + r.name + '" />';
			}
		}],
		data: dd
	};
	var cfg1 = $.extend({}, cfg);
	var cb1 = $('#combo1').mac('combo', cfg1);
	$('#get1').click(function(){
		alert(cb1.selected);
	});
	$('#set1').click(function(){
		cb1.select(2);
	});
	var cfg2 = $.extend({}, cfg);
	cfg2.multiSelect = true;
	var cb2 = $('#combo2').mac('combo', cfg2);
	$('#get2').click(function(){
		alert(cb2.selected.join(','));
	});
	$('#set2').click(function(){
		cb2.select([2,4]);
	});
});
</script>
<h3>multiSelect = false</h3>
<div id="combo1" class="combo customCombo"></div><br/>
&nbsp;&nbsp;<button id="get1">get1</button>&nbsp;<button id="set1">set1</button>
<h3>multiSelect = true</h3>
<div id="combo2" class="combo customCombo"></div><br/>
&nbsp;&nbsp;<button id="get2">get2</button>&nbsp;<button id="set2">set2</button>